<script setup>
import { User } from '@element-plus/icons-vue'
import { ref, toRefs } from 'vue'
import { isLogin, userInfo, getAuthor } from '@/api/user.js'
import defultImg from '@/assets/img.png'
import router from '@/router/index.js'
const props = defineProps({
  id: {
    required: false,
    default: 0,
    type: Number
  }
})
const { id } = toRefs(props)
const user = ref({
  username: '',
  email: '',
  headImage: '',
  role: 0,
  likeCount: 0,
  articleCount: 0,
  followCount: 0,
  createTime: ''
})
const login = ref(false)
const getUser = async () => {
  // 获取用户信息
  const { data } = await userInfo()
  user.value = data
}
const getLoginStatus = async () => {
  const res = await isLogin()
  if (res.code === 200) {
    login.value = true
    await getUser()
  }
}
const init = async () => {
  if (id.value === 0) {
    console.log('用户：' + id.value)
    await getLoginStatus()
  } else {
    console.log('作者：' + id.value)
    // 获取作者信息
    login.value = true
    const { data } = await getAuthor(id.value)
    user.value = data
  }
}
init()
</script>

<template>
  <!--  用户信息  -->
  <el-card class="person" shadow="hover">
    <!--  未登录  -->
    <div v-if="!login" class="no_login">
      <img :src="defultImg" />
      <el-button @click="router.push('/login')">登录</el-button>
    </div>
    <div v-else>
      <div class="user">
        <img :src="user.headImage" alt="头像" />
        <div class="user_info">
          <p>{{ user.username }}</p>
          <p>{{ user.email }}</p>
        </div>
      </div>
      <!--   数据统计   -->
      <div class="data">
        <p class="title">数据统计</p>
        <div class="items">
          <div class="data_item">
            <p class="p1">粉丝数</p>
            <p class="p2">{{ user.followCount }}</p>
          </div>
          <div class="data_item">
            <p class="p1">文章数</p>
            <p class="p2">{{ user.articleCount }}</p>
          </div>
          <div class="data_item">
            <p class="p1">总获赞</p>
            <p class="p2">{{ user.likeCount }}</p>
          </div>
        </div>
      </div>
      <!--   角色以及注册时间   -->
      <div class="role">
        <User /><el-tag style="margin-top: 2rem">{{
          user.role === 9 ? '管理员' : '创作者'
        }}</el-tag>
        <p style="margin-top: 2rem">注册时间: {{ user.createTime }}</p>
      </div>
    </div>
  </el-card>
</template>

<style scoped lang="scss">
/*个人信息卡片*/
.person {
  border-radius: 1rem;
  background: url('@/assets/background-2673536_1280.jpg');
  width: 20rem;
  height: 18.7rem;
  img {
    border-radius: 50%;
    width: 4.5rem;
    height: 4.5rem;
  }
}
/*用户信息*/
.user {
  width: 19rem;
  display: flex;
  justify-content: space-evenly;
  border-radius: 1rem 1rem 0 0;
  padding: 0.5rem;
  .user_info {
    p {
      margin: 1rem 0;
      font-size: 1rem;
      font-weight: 700;
      color: #f5f5f5;
    }
  }
}
/*数据统计*/
.data {
  width: 18rem;
  background-color: #f0f7ff;
  padding: 1rem;
  color: #439eff;
  .title {
    font-weight: 700;
    font-size: 1.5rem;
    margin: 0;
  }
  .items {
    display: flex;
    justify-content: space-between;
    .data_item {
      text-align: center;
      p {
        margin: 0;
      }
      .p2 {
        font-size: 2rem;
        font-weight: 700;
      }
    }
  }
}
/*角色以及注册时间*/
.role {
  color: #f5f5f5;
  border-radius: 0 0 1rem 1rem;
  width: 20rem;
  height: 5.1rem;
  display: flex;
  justify-content: space-evenly;
  svg {
    width: 2rem;
  }
}
/*未登录*/
.no_login {
  width: 8.5rem;
  display: grid;
  padding: 6rem;
  align-content: space-between;
  justify-content: center;
  height: 8rem;
}
:deep .el-card__body {
  border-radius: 10%;
  width: 55rem;
  padding: 0;
}
:deep .el-card__header {
  padding: 0;
}
</style>
